<template>
  <el-container>
      <!--顶栏-->
      <el-header style="text-align: right; font-size: 12px; ">
        <div style="background-color: rgb(255, 105, 0); width: 56px;height: 56px; display:inline-block; float: left" class="milogo">
          <img src="../../../assets/logo/mi-logo.svg" alt="" >
        </div>
        <div style="display: inline-block; float: left; margin-left: 20px">
          <el-input
            placeholder="请输入内容"
            v-model="text01"
            clearable >
          </el-input>
        </div>
        <div style="display: inline-block; float: left; margin-left: 10px">
          <el-row >
            <el-button icon="el-icon-search" circle type="warning" @click="likeSelects"></el-button>
          </el-row>
        </div>
        <div style="display: inline-block; float: left; margin-left: 10px">
          <el-row >
            <el-button  type="warning" round  @click="addProds">添加产品</el-button>
          </el-row>
        </div>
      </el-header>

    <el-dialog
      title="新增产品"
      :visible.sync="isDialogVisible"
      width="35%">
      <el-form :model="ProdsForm" ref="ProdsFormRef" label-width="80px">
        <el-form-item label="标题" prop="title" style="width: 90%">
          <el-input  v-model="ProdsForm.title"></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="introduce" style="width: 90%">
          <el-input v-model="ProdsForm.introduce"></el-input>
        </el-form-item>
<!--        <el-form-item label="价格" prop="price" style="width: 90%">-->
<!--          <el-input v-model="ProdsForm.price"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="产品展示区" style="width:120%;">
      <select style="width: 50%; height: 30px; border: 1px solid #B3C0D1" v-model="ProdsForm.classify">
          <optgroup label="头部产品" >
            <option value="1">Xiaomi手机</option>
            <option value="2">Redmi红米</option>
            <option value="3">电视</option>
            <option value="4">笔记本</option>
            <option value="5">平板</option>
            <option value="6">家电</option>
            <option value="7">路由器</option>
          </optgroup>
        <optgroup label="管轮区产品">
          <option value="8">手机</option>
          <option value="9">电视</option>
          <option value="10">笔记本 平板</option>
          <option value="11">出行 穿戴</option>
          <option value="12">智能 路由器</option>
          <option value="13">电源 配件</option>
          <option value="14">健康 儿童</option>
          <option value="15">耳机 音响</option>
          <option value="16">生活 箱包</option>
        </optgroup>
        <optgroup label="主要产品">
          <option value="17">手机</option>
          <option value="18">家电热门</option>
          <option value="19">电视影音</option>
          <option value="20">智能热门</option>
          <option value="21">出行</option>
          <option value="22">安防</option>
          <option value="23">搭配热门</option>
          <option value="24">耳机音响</option>
          <option value="25">充电器</option>
          <option value="26">配件热门</option>
          <option value="27">周边热门</option>
          <option value="28">出行</option>
        </optgroup>
      </select>
        </el-form-item>

        <el-checkbox border size="mini" style="margin-left: 60px;margin-bottom: 10px" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group  v-model="checkedCities" @change="handleCheckedCitiesChange" :false-label="true" align="center" style="margin-bottom: 20px">
          <el-checkbox border size="small " v-for="(city) in cities" :label="city" :key="city">{{city}}</el-checkbox>
        </el-checkbox-group>

        <el-form-item label="4+64G" style="width: 90%; overflow: hidden" v-if="show.show1">
          <el-input  style=" float: left; width: 50%"
                     placeholder="价格"
                     v-model.number ="ProdsForm.input1"
                     clearable>
          </el-input>
          <el-input style="float: left; width: 40%;margin-left: 10px"
                    placeholder="数量"
                    v-model.number="ProdsForm.input2"
                    clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="6+128G" style="width: 90%; overflow: hidden" v-if="show.show2">
          <el-input  style=" float: left; width: 50%"
                    placeholder="价格"
                     v-model.number="ProdsForm.input3"
                    clearable>
          </el-input>
          <el-input  style="float: left; width: 40%;margin-left: 10px "
                    placeholder="数量"
                    v-model.number="ProdsForm.input4"
                    clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="8+128G" style="width: 90%; overflow: hidden" v-if="show.show3">
          <el-input  style=" float: left; width: 50%"
                    placeholder="价格"
                    v-model.number="ProdsForm.input5"
                    clearable>
          </el-input>
          <el-input  style="float: left; width: 40%;margin-left: 10px "
                    placeholder="数量"
                    v-model.number="ProdsForm.input6"
                    clearable>
          </el-input>
        </el-form-item>

      </el-form>

      <el-upload style="margin-left: 12%"
        class="upload-demo"
        ref="upload1"
        drag
        action="http://localhost:8080/api/toFile"
        accept="bmp,jpg,png,tif,gif"
        :multiple="false"
        :on-success="closeTheFile"
        list-type="picture"
        :limit="1">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
    <el-button @click="isDialogVisible=false">取 消</el-button>
    <el-button type="primary" @click="AddProduct">确 定</el-button>
    </span>
    </el-dialog>

      <el-container>
        <!--左侧边栏-->
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1', '1']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-view"></i>产品管理</template>
              <el-menu-item-group>
                <el-menu-item  @click="setClassifys(1)">头部产品</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group>
                <el-menu-item  @click="setClassifys(2)">导航区产品</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group>
                <el-menu-item  @click="setClassifys(3)">内容区</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!--右侧主栏-->
          <!--   修改产品     -->
        <el-dialog
          title="修改产品"
          :visible.sync="changeProd"
          width="35%">
          <el-form :model="changeProdForm" ref="ProdsFormRef" label-width="80px">
            <el-form-item label="标题" prop="prod_title" style="width: 90%">
              <el-input  v-model="changeProdForm.prod_title"></el-input>
            </el-form-item>
            <el-form-item label="介绍" prop="introduce" style="width: 90%">
              <el-input v-model="changeProdForm.prod_desc"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price" style="width: 90%">
              <el-input v-model="changeProdForm.prod_price_current"></el-input>
            </el-form-item>
            <el-form-item label="分类" style="width:120%;">
              <select style="width: 50%; height: 30px; border: 1px solid #B3C0D1" v-model="changeProdForm.n_id">
                <optgroup label="头部产品" >
                  <option value="1">Xiaomi手机</option>
                  <option value="2">Redmi红米</option>
                  <option value="3">电视</option>
                  <option value="4">笔记本</option>
                  <option value="5">平板</option>
                  <option value="6">家电</option>
                  <option value="7">路由器</option>
                </optgroup>
                <optgroup label="管轮区产品">
                  <option value="8">手机</option>
                  <option value="9">电视</option>
                  <option value="10">笔记本 平板</option>
                  <option value="11">出行 穿戴</option>
                  <option value="12">智能 路由器</option>
                  <option value="13">电源 配件</option>
                  <option value="14">健康 儿童</option>
                  <option value="15">耳机 音响</option>
                  <option value="16">生活 箱包</option>
                </optgroup>
                <optgroup label="主要产品">
                  <option value="17">手机</option>
                  <option value="18">电视影音</option>
                  <option value="19">热门</option>
                  <option value="20">出行</option>
                  <option value="21">安防</option>
                  <option value="22">智能热门</option>
                  <option value="23">耳机音响</option>
                  <option value="24">搭配热门</option>
                  <option value="25">充电器</option>
                  <option value="26">配件热门</option>
                  <option value="27">出行</option>
                  <option value="28">周边热门</option>
                </optgroup>
              </select>
            </el-form-item>
          </el-form>
          <div class="demo-image__preview" style="margin-left: 35%;margin-bottom: 10px">
            <el-image
              style="width: 100px; height: 100px"
              :src="url"
              :preview-src-list="srcList">
            </el-image>
          </div>
          <el-upload style="margin-left: 12%"
                     ref="upload"
                     class="upload-demo"
                     drag
                     action="http://localhost:8080/api/UpdateFile"
                     accept="bmp,jpg,png,tif,gif"
                     :multiple="false"
                     :on-success="toFile"
                     list-type="picture"
                     :limit="1">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <span slot="footer" class="dialog-footer">
    <el-button @click="changeProd=false">取 消</el-button>
    <el-button type="primary" @click="ProdUpdate">确 定</el-button>
    </span>
        </el-dialog>

        <el-main style="background-color: rgb(238, 241, 246)">
          <el-table :data="tableData" border v-if="tableData">
            <el-table-column prop="prod_title" label="标题" width="180" align="center"  >
            </el-table-column>
            <el-table-column prop="prod_desc" label="简介" width="180" align="center" >
            </el-table-column>
            <el-table-column  label="图片" width="180" align="center" >
              <template slot-scope="scope">
                <img :src="scope.row.prod_pic" style="width: 80%; height: 80%">
              </template>
            </el-table-column>
            <el-table-column  label="价格" width="180" align="center" >
              <template slot-scope="scope">
                <span>{{scope.row.prod_price_current}}元</span>
              </template>
            </el-table-column>
            <el-table-column  label="操作" width="250" align="center" >
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" circle  @click="isChangeProd(scope.row)"></el-button>
                <el-button type="success" circle @click="shangChu(scope.row)" v-if="scope.row.stand_up_and_down=='1'" >上架</el-button>
                <el-button type="danger" circle @click="shangChu(scope.row)" v-else >下架</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    <el-footer  style="margin-right: 35%">
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="likeSelects"
        :pager-count="7"
        :page-sizes=[5,8,10]
      />
    </el-footer>
    </el-container>

</template>

<script>
import {prods,addProd,upAndDown,select_id,updateOne,setClassify,likeSelect} from "@/api/prods/Prods";
const cityOptions = ['4+64G','6+128G', '8+128G'];
export default {
  data() {
    return {
      models:[],
      show:{
        show1:false,
        show2:false,
        show3:false,
      },
      checkAll: false,
      checkedCities: [],
      cities: cityOptions,
      isIndeterminate: true,
      tableData: [],
      tableData1:[],
      text01:'',
      total:0,
      page_sizes:[6,8,10,12],
      queryParams: {
        pageNum: 0,
        pageSize: 5,
      },
      isDialogVisible:false,
      ProdsForm:{
        title:'',
        classify :'',
        introduce:'',
        // price:'',
        input1:'',
        input2:'',
        input3:'',
        input4:'',
        input5:'',
        input6:'',
      },
      isUploading:false,
      changeProd:false,
      changeProdForm:{

      },
      url:'',
      srcList:[],
      fileAvatar:''
    }
  },
  methods: {
    getPhone() {
      prods(this.queryParams).then(res => {
        if (res.code!=200){
          this.$message.info("没有找到产品")
        }
        this.tableData1 = res.prods
        if (this.tableData1) {
          for (const tableDataKey in this.tableData1) {
            this.tableData1[tableDataKey].prod_pic = process.env.VUE_APP_BASE_API + this.tableData1[tableDataKey].prod_pic
          }
          this.tableData = this.tableData1
          this.total = res.count
        }
      })
    },
    AddProduct() {
      console.log(this.ProdsForm)
      addProd(this.ProdsForm).then(res => {
       this.dataFormSubmit2()
        this.isDialogVisible = false
      })
    },
    addProds() {
      this.isDialogVisible = true;
      this.ProdsForm = {}
    },
    closeTheFile() {
      this.$message.success("图片上传成功")
      this.isUploading = false
    },
    async shangChu(scope) {
      const confirmResult = await this.$confirm('此操作将修改产品状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info("取消了删除")
      }
      select_id(scope).then(res => {
        if (res.code !== 200) {
          return this.$message.error("产品不存在")
        }
        upAndDown(scope).then(res => {
          if (res.code !== 200) {
            return this.$message.error("产品操作失败")
          }
          if(this.text01){
            this.queryParams.pageNum=0
            this.likeSelects()
          }
          this.getPhone()
          return this.$message.success("修改成功")
        })
      })
    },
    isChangeProd(scope) {
      this.changeProd = true
      this.srcList = []
      select_id(scope).then(res => {
        if (res.code !== 200) {
          return this.$message.error("产品不存在")
        }
        this.changeProdForm = res.isSuccess
        this.url = process.env.VUE_APP_BASE_API + this.changeProdForm.prod_pic
        this.srcList.push(this.url)
      })
    },
    toFile(file) {
      this.fileAvatar=file
      this.url = process.env.VUE_APP_BASE_API + file.avatar
      this.srcList = []
      this.srcList.push(process.env.VUE_APP_BASE_API + file.avatar)
    },
    async ProdUpdate( ) {
      const confirmResult = await this.$confirm('是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        this.changeProd = false
        return this.$message.info("取消了修改")
      }
      updateOne(this. changeProdForm).then(res=>{
        if(res.code!=200){
          return this.$message.error("修改失败")
        }
       this.dataFormSubmit1()
       this.changeProd=false
        if(this.text01){
          this.queryParams.pageNum=0
          this.likeSelects()
        }
        this.getPhone();
        return this.$message.success(res.msg)
      })
    },
    dataFormSubmit1(){
      this.$refs.upload.clearFiles()
    },
    dataFormSubmit2(){
      this.$refs.upload1.clearFiles()
    },
    setClassifys(sign){
      setClassify(sign)
      this.queryParams.pageNum=0
      this.getPhone()
  },
    likeSelects (){
      likeSelect(this.text01).then(res=>{
        if(res.code==200){
         this.getPhone()
        }
      })
    },
    handleCheckAllChange(val) {
      if (val){ this.show.show1=true,this.show.show2=true,this.show.show3=true}
      if (!val){ this.show.show1=false,this.show.show2=false,this.show.show3=false}
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value,state) {
     if(value.length==0){this.show.show1=false,this.show.show2=false,this.show.show3=false}
     if(value.length==3){this.show.show1=true,this.show.show2=true,this.show.show3=true}
      if(value.indexOf('4+64G')>=0){this.show.show1=true}
      if(value.indexOf('4+64G')==-1){this.show.show1=false}
      if(value.indexOf('6+128G')>=0){this.show.show2=true}
      if(value.indexOf('6+128G')==-1){this.show.show2=false}
      if(value.indexOf('8+128G')>=0){this.show.show3=true}
      if(value.indexOf('8+128G')==-1){this.show.show3=false}
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
  },
  created() {
    this.getPhone()
  }
}

</script>

<style scoped>
.el-menu-item:hover{
  background: yellow;
}

.el-submenu .el-menu-item {
  height: 50px;
  line-height: 50px;
  padding: 0 45px;
  min-width: 120px;
}

.container-max{
  height: 680px;
  border: 1px solid #eee;
}

.el-header {
  background-color: rgb(255, 255, 255);
  color: #333;
  line-height: 60px;
}

.el-aside {
  padding-top: 20px;
  color: #333;
}

#app .hideSidebar .el-submenu > /deep/ .el-submenu__title {
  padding-left: 20px !important;
}

.milogo{
  border-radius:19px
}

.milogo img {
  margin-left: -56px;
  transition: all .2s;
}

.milogo img:hover{
  margin-left: 0;
}


</style>
